<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" href="indexCSS.css"> 
    <!-- <script src="indexJs.js"></script> -->

    <!-- 引用jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <!--父视图-->
    <div id="superDivID">
        <!--图片根视图-->
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="img/u=1987826422,3902444409&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="img/u=52961750,4241917740&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="img/u=1683328425,3416302444&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="img/u=2641791226,3925668594&fm=27&gp=0.jpg">
            </div>
        </div>
        
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="img/u=3003671193,2553903077&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="img/u=2317290404,595811789&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="img/u=2626132253,3693590351&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="img/u=895886714,3307578363&fm=27&gp=0.jpg">
            </div>
        </div>
    </div>

    <script>
   
        $(window).on('load',function () {
            //获取每张图片元素
            var imgElement = $('.baseDivClass');
            //用来装图片高度的。第一个值就是第一列图片的高度总和，第二个值就是第二列图片的高度总和
            var cols = [];
            //每张图的div的宽度。
            var imgWidth = imgElement.innerWidth();
            // console.log(imgWidth);
            //屏幕的宽度
            var screenWidth = $(window).width();
            //每行几张图
            var colsNum = parseInt(screenWidth / imgWidth);
            $.each(imgElement,function (index, ele) {
                var everyImgHeight = $(ele).innerHeight();
                if (index < colsNum) {
                    cols[index] = everyImgHeight;
                } else {
                    //找一行中最小的值,高度最小的
                    var minHeight = Math.min.apply(null,cols);
                    //找一行中最小的值,高度最小的索引
                    var minHeightIndex = cols.indexOf(minHeight);
                    // var minHeight = Math.min(2,56,78,4);
                    console.log(minHeightIndex);
                    $(ele).css({
                        'position': 'absolute',
                        'top': minHeight+'px',
                        'left': (minHeightIndex*imgWidth)+'px'
                    });
                    cols[minHeightIndex] += everyImgHeight;
                }
            });
        })
    
    </script>
</body>
</html>